﻿{% extends "base/base.html" %}
{% load staticfiles %}

{% block customizedCSS %}
   <!-- this page specific styles -->
    <link rel="stylesheet" href="/static/css/compiled/tables.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="/static/css/compiled/user-list.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/static/css/kkpager_blue.css">
    <style type="text/css">
    *{font-family:'Microsoft YaHei';}
    .span_modal{font-weight: 600;}
    .span_li{line-height: 25px; font-size: 14px;}
    </style>
{% endblock %}
 {% block containers %}
	<!-- main container -->
    <div class="content" ng-app="myApp" ng-controller="prod_controller">
        <div class="container-fluid">
            <div id="pad-wrapper" class="users-list">

                <!-- products table-->
                <!-- the script for the toggle all checkboxes from header is located in js/theme.js -->
                <div class="table-wrapper products-table section">
                    <div class="row-fluid head">
                        <div class="span12">
                            <h3>商品列表</h3>
                        </div>
                    </div>

                    <div class="row-fluid filter-block">
                        <div class="pull-right">
                            <input type="text" class="search" id="query" style="margin-right: 0" value={{query}} />
                            <input type="button" class="btn-glow" id="btn_search" value="查 找"
                            style="height: 25px;line-height: 15px;margin-right: 40px;">
                            <a class="btn-flat success new-product" href="/product/new/">+ 添加商品</a>
                        </div>
                    </div>

                    <div class="row-fluid">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th class="span1">
                                        <input type="checkbox" />
                                        编号
                                    </th>
                                    <th class="span1">
                                        图片
                                    </th>
                                    <th class="span2">
                                        <span class="line"></span>名称
                                    </th>
                                    <th class="span2">
                                       <span class="line"></span>库存/单位
                                    </th>
                                    <th class="span2">
                                       <span class="line"></span>建议售价
                                    </th>
                                    <th class="span1">
                                        <span class="line"></span>状态
                                    </th>
                                    <th class="span3">
                                        <span class="line"></span>介绍
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                            {%for item in list%}
                                <!-- row -->
                                <tr>
                                    <td>
                                        <input type="checkbox" style="margin-top: 4px" />
                                        <a href="">#{{item.code}}</a>
                                        <!--<a href="../product-info/?code={{item.code}}">#{{item.code}}</a>-->
                                    </td>
                                    <td>
                                        <div class="img">
                                            <img src="{{item.img}}"/>
                                        </div>
                                    </td>
                                    <td class="description">
                                        <a href="../product-info/?code={{item.code}}" class="name"  ng-click="hello({{item.code}})" data-toggle="modal" data-target="#product_Modal"
                                        style="top:0">{{item.name}}</a>
                                    </td>
                                    <td>
                                        {{item.inventory}}
                                    </td>
                                    <td>
                                        ￥{{item.price}}
                                    </td>
                                    <td>
                                        {% if item.state == 1 %}
                                            <span class="label label-success">正常</span>
                                        {% else %}
                                            {%if item.state == 0 %}
                                            <span class="label label-info">无库存</span>
                                            {%else%}
                                            <span class="label">禁用</span>
                                            {%endif%}
                                        {%endif%}
                                    </td>
                                    <td class="description">
                                        {{item.introduce}}
                                    </td>
                                </tr>
                                {%endfor%}
                            </tbody>
                        </table>
                    </div>
                <div class="pagination" id="kkpager">
                </div>
                </div>
                <!-- end products table -->
            </div>
        </div>
            <!--Modal dialog-->
        <div class="modal fade" id="product_Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header" style="background: #D61E1C">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="exampleModalLabel" style="color: white">商品详情 - <%ng_title%></h4>
                    </div>
                    <div class="modal-body">
                        <div style="height: 170px;width: 105px;float: left;">
                            <img style="width:100px;height: 120px;" src="<%ng_img%>"/>
                        </div>
                        <div style="height: 170px; width: 423px; float: right;">
                            <table>
                                <tr>
                                    <td><span class="span_modal">商品编号：</span></td>
                                    <td><%ng_code%></td>
                                <tr>
                                <tr>
                                    <td><span class="span_modal">库存：</span></td>
                                    <td><%ng_inventory%>单位</td>
                                <tr>
                                <tr>
                                    <td><span class="span_modal">进价：</span></td>
                                    <td>￥<%ng_price%></td>
                                <tr>
                                <tr>
                                    <td><span class="span_modal">建议售价：</span></td>
                                    <td>￥<%ng_cost%></td>
                                <tr>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-glow" data-dismiss="modal">确定</button>
                    </div>
                 </div>
            </div>
        </div>
    </div>
    <!-- end main container -->
{% endblock %}

        {% block customizedJS %}
<script src="/static/js/kkpager.min.js"></script>
    <script src="/static/js/angular.min.js"></script>
    <script type="text/javascript">
        var app=angular.module('myApp',[]);
        app.config(function($interpolateProvider) {
            $interpolateProvider.startSymbol('<%');
            $interpolateProvider.endSymbol('%>');
        });
        app.controller('prod_controller',function($scope,$http){
            $scope.hello=function(str){
                 $http.get('/product/api_prod/?code='+str).success(function(data){
                    data=data[0].fields;
                    $scope.ng_title=data.name;  $scope.ng_inventory=data.inventory;
                    $scope.ng_cost=data.cost;   $scope.ng_price=data.price;
                    $scope.ng_code=data.code;   $scope.ng_img=data.img;
                    $scope.ng_notes=data.notes;
                 });
                 //$scope.ng_title=str;
            }
        });

        $(document).ready(function(){
            $("#btn_search").click(function(){
                var query=$("#query").val();
                if(query!=""){
                    window.location.href="/product/list/?query="+query
                } else{
                    window.location.href="/product/list/"
                }
            });
        });

        function getParameter(name) {
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r!=null) return unescape(r[2]); return null;
        }
        $(function(){
            var totalPage ={{totalPage}};
            var totalRecords ={{totalRecords}};
            var pageNo = getParameter('page');
            var query="{{query}}";
            var latter="";
            if(!pageNo){
                pageNo = 1;
            }
            if(query=="None"){
                latter="";
            }
            //生成分页
            //有些参数是可选的，比如lang，若不传有默认值
            kkpager.generPageHtml({
                pno : pageNo,
                //总页码
                total : totalPage,
                //总数据条数
                totalRecords : totalRecords,
                //链接前部
                hrefFormer : '/product/list',
                //链接尾部
                hrefLatter : '?query='+latter,
                getLink : function(n){
                    return this.hrefFormer + this.hrefLatter + "&page="+n;
                }
            });
        });
        </script>
        {% endblock %}
